@if (label() || tooltip()) {
  <ix-label
    [label]="label()"
    [tooltip]="tooltip()"
    [required]="required()"
    [ixTestOverride]="controlDirective.name || ''"
  ></ix-label>
}

<div class="input-container" [class.disabled]="isDisabled">
  <mat-chip-grid
    #chipList
    class="form-chip"
    [disabled]="isDisabled"
    [required]="required()"
    [attr.aria-label]="label()"
  >
    @for (chipLabel of labels; track trackByIdentity(chipLabel)) {
      <mat-chip-row
        class="chip"
        [disabled]="false"
        [removable]="!isDisabled"
        [attr.aria-label]="chipLabel"
        (removed)="onRemove(chipLabel)"
      >
        {{ chipLabel }}
        @if (!isDisabled) {
          <ix-icon name="cancel" matChipRemove></ix-icon>
        }
      </mat-chip-row>
    }

    <input
      #chipInput
      [placeholder]="placeholder()"
      [ixTest]="controlDirective.name"
      [disabled]="isDisabled"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (blur)="onInputBlur()"
      (matChipInputTokenEnd)="allowNewEntries() ? onAdd($event.value) : null"
    />
  </mat-chip-grid>

  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onAdd($event.option.value)">
    @if (suggestions$) {
      @for (suggestion of suggestions$ | async; track trackByIdentity(suggestion)) {
        <mat-option
          [value]="suggestion"
          [ixTest]="[controlDirective.name, suggestion]"
        >
          {{ suggestion }}
        </mat-option>
      }
    }
  </mat-autocomplete>
</div>

@let control = controlDirective.control;
@if (control) {
  <ix-errors [control]="control" [label]="label()"></ix-errors>
}

@if (hint()) {
  <mat-hint>{{ hint() }}</mat-hint>
}
